<template>
  <div class="app-container" v-loading="loading">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
      custom-layout
    >
      <vxe-form-item
        field="name"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入名称搜索' },
        }"
      />
      <vxe-form-item
        field="specification"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入型号搜索' },
        }"
      />
      <vxe-form-item
        field="factory"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入厂商搜索' },
        }"
      />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            { props: { type: 'submit', content: '查询', status: 'primary' } },
            { props: { type: 'reset', content: '重置' } },
          ],
        }"
      />
      <vxe-form-item>
        <template #default>
          <vxe-button size="medium" @click="showMore" v-if="!isShowMore"
            >更多</vxe-button
          >
          <vxe-button size="medium" @click="showMore" v-else>收起</vxe-button>
        </template>
      </vxe-form-item>
      <div v-if="isShowMore">
        <vxe-form-item>
          <template>
            <el-date-picker
              v-model="selectedDate"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="getDateInterval()"
              size="small"
            >
            </el-date-picker>
          </template>
        </vxe-form-item>
      </div>
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'customer:add']"
          size="medium"
          icon="el-icon-circle-plus-outline"
          status="primary"
          @click="onAddBtnClick"
          >新增</vxe-button
        >
        <vxe-button
          v-auth="['admin', 'customer:add']"
          size="medium"
          icon="el-icon-check"
          status="primary"
          :disabled="!multipleSelection.length"
          @click="onSubmitBtnClick"
          >提交</vxe-button
        >
        <vxe-button
          v-auth="['admin', 'customer:add']"
          size="medium"
          icon="el-icon-check"
          status="primary"
          :disabled="!multipleSelection.length"
          @click="onAuditBtnClick"
          >审核</vxe-button
        >
        <vxe-button
          v-auth="['admin', 'customer:add']"
          size="medium"
          icon="el-icon-delete"
          status="danger"
          :disabled="!multipleSelection.length"
          @click="onDeleteBtnClick"
          >删除</vxe-button
        >
        <vxe-button
          v-auth="['admin', 'customer:add']"
          size="medium"
          icon="el-icon-printer"
          status="primary"
          >打印</vxe-button
        >
        <vxe-button size="medium" icon="el-icon-download" @click="onAddBtnClick"
          >下载模板</vxe-button
        >
        <vxe-button size="medium" icon="el-icon-upload2" @click="onAddBtnClick"
          >导入</vxe-button
        >
        <vxe-button size="medium" icon="el-icon-download" @click="onAddBtnClick"
          >导出</vxe-button
        >
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      resizable
      highlight-current-row
      :data="tableData"
      align="left"
      show-overflow
      show-header-overflow
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      :footer-method="footerMethod"
      show-footer
    >
      <vxe-table-column type="checkbox" width="50" fixed="left" />
      <vxe-table-column
        field="code"
        title="设备编码"
        width="150px"
        fixed="left"
      >
        <template v-slot="{ row }">
          <a
            class="buttonText"
            style="color: #1890ff; font-weight: bold"
            @click="openDetailDialog(row)"
            >{{ row.code }}</a
          >
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="name"
        title="设备名称"
        width="150px"
        fixed="left"
      />
      <vxe-table-column field="specification" title="设备型号" width="150px" />
      <vxe-table-column field="status" title="设备状态" width="100">
        <template v-slot="{ row }">
          <div v-for="item in statusList" :key="item.id">
            <span v-if="row.status === item.value">{{ item.label }}</span>
          </div>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="factory"
        title="设备厂商"
        width="150px"
        align="left"
      />
      <vxe-table-column align="right" field="price" title="价格¥" width="150px">
        <template v-slot="{ row }">{{ row.price | moneyFormat }}</template>
      </vxe-table-column>
      <vxe-table-column
        field="produceDate"
        title="生产日期"
        width="150px"
        align="left"
      />
      <vxe-table-column
        field="purchaseDate"
        title="采购日期"
        width="150px"
        align="left"
      />
      <vxe-table-column
        field="applyDate"
        title="投产日期"
        width="150px"
        align="left"
      />
      <vxe-table-column
        field="location"
        title="所在位置"
        width="150px"
        align="left"
      />
      <vxe-table-column
        field="canUseYear"
        title="折旧年限"
        width="150px"
        align="left"
      />
      <vxe-table-column
        field="enabled"
        title="启用/停用"
        width="95"
        align="center"
      >
        <template v-slot="{ row }">
          <vxe-switch
            v-model="row.enabled"
            open-label="启用"
            close-label="停用"
            @change="onChangeEnable($event, row.id)"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column field="comments" title="备注" width="130px" />
      <vxe-table-column title="操作" width="150" align="center" fixed="right">
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="top" effect="light">
            <vxe-button
              size="mini"
              icon="el-icon-edit"
              status="primary"
              :disabled="row.enabled != '1'"
              @click="onEditBtnClick(row)"
            />
          </el-tooltip>
          <el-tooltip
            content="删除"
            placement="top"
            effect="light"
            class="pop-del"
          >
            <vxe-button
              size="mini"
              icon="el-icon-delete"
              status="danger"
              @click="onDeleteBtnClick"
            ></vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button size="medium" @click="toStandardPage"
          >采购开单页面模板</vxe-button
        >
      </template>
    </vxe-toolbar>
    <eForm
      v-if="detail"
      v-model="detail"
      ref="from"
      @colseDialog="colseDialog"
    />
    <detailDialog v-if="detailDialog" v-model="detailDialog" />
  </div>
</template>

<script>
import eForm from './form'
import detailDialog from './detailDialog/index.vue'
import { moneyFormat, getDateInterval } from '@/utils/customFilter'
export default {
  components: {
    eForm,
    detailDialog,
  },
  data() {
    return {
      loading: false,
      isShowMore: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
      },
      visible: false,
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      data: [],
      param: {},
      checked: [],
      statusList: [
        { label: '未启用', value: 'unuse' },
        { label: '已启用', value: 'using' },
        { label: '维修中', value: 'repair' },
        { label: '已报废', value: 'Scrap' },
      ],
      multipleSelection: [],
      detailDialog: null,

      selectedDate: '',
      data: {
        total: 3,
        list: [
          {
            id: '1',
            code: 'SN20220123001',
            name: '母线加工机',
            specification: '303E-3-S',
            status: 'using',
            factory: '山东力建数控设备有限公司',
            price: '230000.00',
            produceDate: '2020-05-05',
            purchaseDate: '2020-06-15',
            applyDate: '2020-06-20',
            location: '1号仓库',
            canUseYear: '5年',
            enabled: true,
            comment: '',
            detailList: [
              {
                id: '1',
                name: '加工钢材',
                code: 'jggc',
                typeId: 'bedcc51eab293ba311b952b8cee7f542',
                typeName: '钢材',
                specs: '规格1',
                enabled: true,
                unit: '件',
                unitType: 'jj',
                hasSendNumber: 5,
                hasReciveMoney: 100,
                purchasePrice: '120.56',
                salesPrice: '129.56',
                comment: '哈哈哈哈哈哈',
                bomList: [],
                number: 0,
                price: '129.56',
                totalMoney: '1000',
              },
              {
                id: '2',
                name: '加工钢材2',
                code: 'jggc2',
                typeId: 'bedcc51eab293ba311b952b8cee7f542',
                typeName: '钢材',
                specs: '规格2',
                enabled: true,
                unit: '件',
                unitType: 'jj',
                purchasePrice: '120.56',
                salesPrice: '129.56',
                hasSendNumber: 5,
                hasReciveMoney: 100,
                comment: '哈哈哈哈哈哈3333',
                bomList: [],
                number: 0,
                price: '129.56',
                totalMoney: '1000',
              },
            ],
          },
          {
            id: '2',
            code: 'SN20220123002',
            name: '数控母线冲剪机',
            specification: 'MX602K-8C',
            status: 'using',
            factory: '山东力建数控设备有限公司',
            price: '200000.00',
            produceDate: '2020-04-05',
            purchaseDate: '2020-06-15',
            applyDate: '2020-06-21',
            location: '10号仓库',
            canUseYear: '5年',
            enabled: true,
            comment: '',
            detailList: [
              {
                id: '1',
                name: '加工钢材',
                code: 'jggc',
                typeId: 'bedcc51eab293ba311b952b8cee7f542',
                typeName: '钢材',
                specs: '规格1',
                enabled: true,
                unit: '件',
                unitType: 'jj',
                hasSendNumber: 5,
                hasReciveMoney: 100,
                purchasePrice: '120.56',
                salesPrice: '129.56',
                comment: '',
                bomList: [],
                number: 0,
                price: '129.56',
                totalMoney: '1000',
              },
              {
                id: '2',
                name: '加工钢材2',
                code: 'jggc2',
                typeId: 'bedcc51eab293ba311b952b8cee7f542',
                typeName: '钢材',
                specs: '规格2',
                enabled: true,
                unit: '件',
                unitType: 'jj',
                purchasePrice: '120.56',
                salesPrice: '129.56',
                hasSendNumber: 5,
                hasReciveMoney: 100,
                comment: '',
                bomList: [],
                number: 0,
                price: '129.56',
                totalMoney: '1000',
              },
            ],
          },
        ],
      },
    }
  },
  watch: {
    isShow: function () {
      this.$emit('input', null)
    },
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    moneyFormat,
    getDateInterval,
    showMore() {
      console.log('more')
      this.isShowMore = !this.isShowMore
    },
    onSearchBtnClick() {
      // this.loading = true;
      // coalEnters(this.formData).then(data => {

      this.tableData = this.data.list
      this.total = this.data.total
      // this.loading = false;
      // });
    },

    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onEditBtnClick(data) {
      this.detail = data
      console.log(this.detail)
      // const _this = this.$refs.from
      // _this.fields = {
      //   id: data.id,
      //   code: data.code,
      //   name: data.name,
      //   reportType: data.reportType,
      //   priceType: data.priceType,
      //   qualityTestStage: data.qualityTestStage,
      //   defectiveItems: data.defectiveItems,
      //   comment: data.comment,
      // }
    },
    //批量提交
    onSubmitBtnClick() {
      this.$confirm('确定提交该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.submitData())
    },
    async submitData() {
      this.$notify({
        type: 'success',
        message: '提交成功!',
      })
    },
    //批量审核
    onAuditBtnClick() {
      this.$confirm('确定审核通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.aduitData())
    },
    async aduitData() {
      this.$notify({
        type: 'success',
        message: '审核成功!',
      })
    },
    //批量删除
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.deleteData())
    },
    async deleteData() {
      // const selectRecords = this.$refs.table.getCheckboxRecords()
      // await del(selectRecords.map(item => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!',
      })
    },

    toStandardPage() {
      this.$router.push('/standard-page')
    },
    // 显示弹框
    openDetailDialog() {
      this.detailDialog = {}
    },

    colseDialog() {
      this.detail = null
      this.onSearchBtnClick()
    },
    onChangeEnable($event, id) {},

    //CheckBox勾选
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 5) {
            return '合计'
          }
          if (columnIndex === 6) {
            return this.moneyFormat(`${this.sumNum(data, 'price')}`)
          }

          return
        }),
      ]
    },
    //合计
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      return count
    },
  },
}
</script>

<style lang="less" scoped>
.pop-del {
  margin-left: 10px;
}
</style>
